<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>JS</title>
	<style type="text/css">
		div{
	        background: rgba(30,100,30,0.3);
	        width: 500px;
	        height: 500px;
	        letter-spacing: 5px;
	        padding: 5px
	      }
	</style>
</head>
<body>
	<input type="button" id="btn" value="测试按钮">
  	<div id="div1"></div>
	<script type="text/javascript">
		function ajax(url, fnSucc,fnFaild){
		    //1【创建】
		    if(window.XMLHttpRequest){
		        var oAjax = new XMLHttpRequest();
		    }else{
		        var oAjax = new ActiveXObject("Microsoft.XMLHTTP");
		    };
		    //2: 【连接】true:表示异步
		    oAjax.open('GET',url,true);
		    //3：【发送】
		    oAjax.send();
		    //4：【接受】
		    oAjax.onreadystatechange = function(){
		        //判断浏览器操作到哪一步
		        if(oAjax.readyState == 4){//4：读取完成
		            if(oAjax.status==200){
		                fnSucc(oAjax.responseText);
		            }else{
		                if(fnFaild){
		                    fnFaild(oAjax.status);
		                }
		            }
		            
		        }
		    }
		};
		var btn=document.getElementById('btn');
	  	var div1=document.getElementById('div1');
	  	btn.onclick=function (){
	  		//1、ajax读取json和读取普通文本，和读取链接都是一样的，在url处放上json文件的地址即可
	    	ajax('index.json',function(str){ 
	    		//2、解析json：将json从字符串转化为数组或对象
	        	var obj=JSON.parse(str) 
	        	//alert(typeof obj)
	       		for(var i in obj){
	            	for(var j in obj[i]){
		            	//3、dom动态创建元素document.createElement
		            	var li=document.createElement('li'); 
		            	li.innerHTML=j+':'+obj[i][j];
		            	//4、dom动态给元素添加孩子
		            	div1.appendChild(li);
	            	}
	        	} 
	   	 	},function(s){
	      		alert(s)
	    	})
	  	};
		/*
			Ajax对象成员
			属性：
				responseText:以字符串形式接收服务器端返回的信息
				readyState:表示读取返回的状态
				onreadystatechange:当Ajax的状态readyState发生变化时触发执行
			方法：
				open();//创建新的http请求
				send();//发送请求
			
			Ajax属性
			readyState:表示读取返回的状态
					0：刚创建ajax对象
					1：已经调用了open方法，创建了http请求
					2：已经调用了send方法，发送了请求
					3：正在返回数据，但是不完整。已经返回了一部分数据
					4：ajax请求完成，数据返回完整
		*/
	</script>
</body>
</html>